<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>导航</title>
		<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
	</head>
	<body>
		<div class="container">
			<p>标签式的导航菜单</p>
			<ul class="nav nav-tabs">
			  <li class="active"><a href="#">Home</a></li>
			  <li><a href="#">SVN</a></li>
			  <li><a href="#">iOS</a></li>
			  <li><a href="#">VB.Net</a></li>
			  <li><a href="#">Java</a></li>
			  <li><a href="#">PHP</a></li>
			</ul>
			
			<p>基本的胶囊式导航菜单</p>
			<ul class="nav nav-pills">
			  <li class="active"><a href="#">Home</a></li>
			  <li><a href="#">SVN</a></li>
			  <li><a href="#">iOS</a></li>
			  <li><a href="#">VB.Net</a></li>
			  <li><a href="#">Java</a></li>
			  <li><a href="#">PHP</a></li>
			</ul>
			
			<p>垂直的胶囊式导航菜单</p>
			<ul class="nav nav-pills nav-stacked">
			  <li class="active"><a href="#">Home</a></li>
			  <li><a href="#">SVN</a></li>
			  <li><a href="#">iOS</a></li>
			  <li><a href="#">VB.Net</a></li>
			  <li><a href="#">Java</a></li>
			  <li><a href="#">PHP</a></li>
			</ul>
			
			<p>带有下拉菜单的标签</p>
			  <ul class="nav nav-tabs">
			    <li class="active"><a href="#">Home</a></li>
			    <li><a href="#">SVN</a></li>
			    <li><a href="#">iOS</a></li>
			    <li><a href="#">VB.Net</a></li>
			    <li class="dropdown">
			      <a class="dropdown-toggle" data-toggle="dropdown" href="#">
			        Java <span class="caret"></span>
			      </a>
			      <ul class="dropdown-menu">
			        <li><a href="#">Swing</a></li>
			        <li><a href="#">jMeter</a></li>
			        <li><a href="#">EJB</a></li>
			        <li class="divider"></li>
			        <li><a href="#">分离的链接</a></li>
			      </ul>
			    </li>
			    <li><a href="#">PHP</a></li>
			  </ul>
			  
			  <ul class="breadcrumb">
			      <li><a href="#">Home</a></li>
			      <li><a href="#">2013</a></li>
			      <li class="active">十一月</li>
			  </ul>
			  <hr >
			  <h5>分页导航</h5>
			  <ul class="pagination">
			      <li><a href="#">&laquo;</a></li>
			      <li><a href="#">1</a></li>
			      <li class="active"><a href="#">2</a></li>
			      <li><a href="#">3</a></li>
			      <li><a href="#">4</a></li>
			      <li><a href="#">5</a></li>
			      <li><a href="#">&raquo;</a></li>
			  </ul>
			  <hr >
			  <h5>翻页导航</h5>
			  <ul class="pager">
				  <li><a href="">上一页</a></li>
				  <li><a href="">下一页</a></li>
			  </ul>

		</div>
		
		<!-- 如果使用bootstrap的js插件，需要先调入jQuery -->
		<script src="js/jquery-3.6.0.js"></script>
		<!-- bootstrap的js -->
		<script src="bootstrap/js/bootstrap.min.js"></script>
	</body>
</html>
